<template>
  <el-card shadow="never" pl-107px pr-107px>
    <PlusForm
      v-model="state"
      :columns="columns"
      :rules="rules"
      :row-props="{ gutter: 20 }"
      label-width="140px"
      @change="handleChange"
      @submit="handleSubmit"
      @submit-error="handleSubmitError"
      @reset="handleReset"
    >
      <template #plus-extra-name11112="column">
        <div>
          <div flex justify-end items-center mb-6px>
            <el-button link type="primary" @click="handleAdd">新增数据</el-button>
            <el-button link type="primary" @click="handleDelete">移除数据</el-button>
            <el-button link type="primary" @click="editTable(false)">取消编辑</el-button>
            <el-button link type="primary" @click="editTable(true)">开启编辑</el-button>
          </div>

          <PlusTable
            :is-selection="true"
            :index-table-column-props="{
              label: '序号',
              width: 80,
            }"
            has-index-column
            :stripe="false"
            :title-bar="false"
            :columns="tableConfig"
            :editable="editable"
            :table-data="tableData"
            @formChange="formChange"
          ></PlusTable>
        </div>
      </template>
      <template #footer="{ handleSubmit, handleReset }">
        <div pt-50px style="margin: 0 auto">
          <el-button
            plain
            text-14px
            w-98px
            type="primary"
            style="
              font-size: 15px;
              color: #fff;
              background: linear-gradient(
                90deg,
                rgba(0, 108, 222, 1) 0%,
                rgba(41, 182, 244, 1) 100%,
                rgba(0, 163, 235, 1) 99%
              );
              border: none;
            "
            @click="handleSubmit"
          >
            提交
          </el-button>
          <el-button w-98px style="margin-left: 55px !important" plain @click="handleReset">
            取消
          </el-button>
        </div>
      </template>
    </PlusForm>
  </el-card>
</template>

<script lang="ts" setup>
import type { PlusColumn, FieldValues } from "plus-pro-components";
import { useTable } from "plus-pro-components";
import { set } from "lodash-es";

interface TableRow {
  id: number;
  name: string;
  status: string;
  rate: number;
  switch: boolean;
  time: Date | string;
}

const state = ref<FieldValues>({
  status: "0",
  name: "",
  rate: 4,
  progress: 100,
  switch: true,
  time: new Date().toString(),
  img: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
});

const router = useRouter();

const rules = {
  name: [
    {
      required: true,
      message: "请输入名称",
    },
  ],
  tag: [
    {
      required: true,
      message: "请输入标签",
    },
  ],
};

const columns: PlusColumn[] = [
  {
    label: "",
    width: 120,
    prop: "name1111",
    valueType: "copy",
    renderField: (_) => {
      return h("div", {}, "");
    },
    renderLabel: () => {
      return h(
        "div",
        {
          style: {
            color: "#000",
            fontWeight: "bold",
            marginLeft: "-30px",
            fontSize: "16px",
          },
        },
        "基本信息"
      );
    },
  },
  {
    label: "公司名称",
    width: 120,
    prop: "name",
    valueType: "copy",
    colProps: {
      span: 12,
    },
  },
  {
    label: "统一信用代码",
    width: 120,
    prop: "name",
    valueType: "copy",
    colProps: {
      span: 12,
    },
  },
  {
    label: "公司简介",
    width: 120,
    prop: "name",
    valueType: "copy",
    colProps: {
      span: 12,
    },
  },
  {
    label: "电话",
    width: 120,
    prop: "name",
    valueType: "copy",
    colProps: {
      span: 12,
    },
  },
  {
    label: "邮箱",
    width: 120,
    prop: "name",
    valueType: "copy",
    colProps: {
      span: 12,
    },
  },
  {
    label: "注资资本",
    width: 120,
    prop: "name",
    valueType: "copy",
    colProps: {
      span: 12,
    },
  },
  {
    label: "法定代表人",
    width: 120,
    prop: "name",
    valueType: "copy",
    colProps: {
      span: 12,
    },
  },
  {
    label: "注册时间",
    prop: "time",
    valueType: "date-picker",
    colProps: {
      span: 12,
    },
  },
  {
    label: "公司编码",
    width: 120,
    prop: "name",
    valueType: "copy",
    colProps: {
      span: 12,
    },
  },
  {
    label: "企业类型",
    width: 120,
    prop: "status",
    valueType: "select",
    options: [
      {
        label: "民营企业",
        value: "0",
        color: "red",
      },
      {
        label: "合资企业",
        value: "1",
        color: "blue",
      },
      {
        label: "国有企业",
        value: "2",
        color: "yellow",
      },
      {
        label: "外资企业",
        value: "3",
        color: "red",
      },
    ],
    colProps: {
      span: 12,
    },
  },
  {
    label: "公司地址",
    width: 120,
    prop: "tag",
    colProps: {
      span: 12,
    },
  },
  {
    label: "所属行业",
    width: 120,
    prop: "status",
    valueType: "select",
    options: [
      {
        label: "制造业",
        value: "0",
        color: "red",
      },
      {
        label: "农业",
        value: "1",
        color: "blue",
      },
      {
        label: "服务业",
        value: "2",
        color: "yellow",
      },
    ],
    colProps: {
      span: 12,
    },
  },
  {
    label: "公司官网",
    width: 120,
    prop: "tag",
    colProps: {
      span: 12,
    },
  },
  {
    label: "经营范围",
    prop: "desc",
    valueType: "textarea",
    fieldProps: {
      maxlength: 10,
      showWordLimit: true,
      autosize: { minRows: 2, maxRows: 4 },
    },
  },
  {
    label: "",
    width: 120,
    prop: "name11112",
    valueType: "copy",
    renderField: (_) => {
      return h("div", {}, "");
    },
    renderLabel: () => {
      return h(
        "div",
        {
          style: {
            color: "#000",
            fontWeight: "bold",
            marginLeft: "-30px",
            fontSize: "16px",
          },
        },
        "股东信息"
      );
    },
  },
  {
    label: "",
    width: 120,
    prop: "bank",
    valueType: "copy",
    renderField: (_) => {
      return h("div", {}, "");
    },
    renderLabel: () => {
      return h(
        "div",
        {
          style: {
            color: "#000",
            fontWeight: "bold",
            marginLeft: "-30px",
            fontSize: "16px",
          },
        },
        "银行信息"
      );
    },
  },
  {
    label: "开户银行",
    width: 120,
    prop: "tag",
    colProps: {
      span: 12,
    },
  },
  {
    label: "银行账号",
    width: 120,
    prop: "tag",
    colProps: {
      span: 12,
    },
  },
  {
    label: "基本存款账户编号",
    width: 120,
    prop: "tag",
    colProps: {
      span: 12,
    },
  },
  {
    label: "行号",
    width: 120,
    prop: "tag",
    colProps: {
      span: 12,
    },
  },
];

const handleChange = (values: FieldValues) => {
  console.log(values, "change");
};
const handleSubmit = (values: FieldValues) => {
  console.log(values, "Submit");
};
const handleSubmitError = (err: any) => {
  console.log(err, "err");
};
const handleReset = () => {
  console.log("handleReset");
  router.go(-1);
};

// Table
const TestServe = {
  getList: async () => {
    const data = Array.from({ length: 3 }).map((item, index) => {
      return {
        id: index,
        name: index === 0 ? "" : index + "name",
        status: String(index % 3),
        rate: index > 3 ? 2 : 3.5,
        switch: index % 2 === 0 ? true : false,
        time: new Date(),
      };
    });
    return { data: data as TableRow[] };
  },
};
const { tableData } = useTable<TableRow[]>();

const editable = ref(false);
const tableConfig = ref<PlusColumn[]>([
  {
    label: "股东名称",
    prop: "name",
  },
  {
    label: "持股比例",
    prop: "status",
  },
  {
    label: "认缴资金",
    prop: "rate",
  },
]);

const getList = async () => {
  try {
    const { data } = await TestServe.getList();
    tableData.value = data;
  } catch (error) {
    console.error("获取数据失败", error);
  }
};
getList();

const handleAdd = () => {
  const index = ((tableData.value.at(-1)?.id as number) || 0) + 1;
  tableData.value.push({
    id: index,
    name: index < 2 ? "" : index + "name",
    status: String(index % 3),
    rate: index > 3 ? 2 : 3.5,
    switch: index % 2 === 0 ? true : false,
    time: index < 2 ? "" : new Date(),
  });
};
const handleDelete = () => {
  tableData.value.pop();
};

// @ts-ignore
const formChange = ({ value, prop, index }) => {
  // 同步表单数据到表格
  set(tableData.value[index], prop, value);
  console.log(tableData.value, "tableData.value");
};

const editTable = (isEdit: boolean) => {
  editable.value = isEdit;
};
</script>
<style scoped>
.el-card {
  border: none;
}

:deep(.el-table th.el-table__cell) {
  background-color: #fff !important;
}
</style>
